<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
	
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<style>
			html,body {
				background-color: #efeff4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			.main_lunbo{
				height: 25%;
			}
			.main_lunbo div .mui-slider-item a> img{
				height: 25vh;
			}
			#navigation{
				background-color: #BAD7E0;
				color: purple;
			}
			#recommend-card .mui-card-header img{
				/*width: 32px;*/
				/*height: 32px;*/
			}
			.mui-card{
				padding: 5px 5px;
				/*border: none;*/
			}
			.mui-card-content a img{
				width: 100%;
				height: 20%;
			}
			.cate{
				list-style: none;
				padding: 2% 0;
			}
			.gtitle{
				width: 100%;
				display: block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll" ms-controller="mainPage">
			<div class="mui-slider main_lunbo">
				<div class="mui-slider-group mui-slider-loop" id="adv">
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a ms-attr="{href:@adv[@advlength].link}">
							<img ms-attr="{src:@imgPath+@adv[@advlength].thumb}" />
						</a>
					</div>
					<!---->
					<div class="mui-slider-item" ms-for="el in @adv">
						<a ms-attr="{href:el.link}">
							<img ms-attr="{src:@imgPath+el.thumb}"/>
						</a>
					</div>
					<!---->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a ms-attr="{href:@adv[0].link}">
							<img ms-attr="{src:@imgPath+@adv[0].thumb}"/>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator" id="advindic">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator" ms-for="el in @adv | limitBy(@adv.length-1,1)"></div>
				</div>
			</div>
			<!--导航栏-->
			<div class="navigation" id="navigation">
				<ul class="mui-row" id="navcate">
					<!---->
					<li class="mui-col-xs-3 mui-media cate" ms-for="el in @cate">
						<a ms-attr="{id:el.id}" >
							<span class="mui-icon FontAwesome icon-adn"></span>
							<div class="mui-media-body">
								{{el.name}}
							</div>
						</a>
					</li>
					<!--END-->
				</ul>
			</div>
			<!--推薦商品-->
			<div class="tuijian">
				<div class="mui-slider recommend-lunbo">
					<div class="mui-slider-group mui-slider-loop" id="lunbogood">
						<!---->
						<div class="mui-slider-item mui-slider-duplicate">
							<ul class="mui-table-view mui-grid-view">
								<li class="mui-table-view-cell mui-media mui-col-xs-6">
									<a ms-attr="{id:@good[2].id}">
										<img class="mui-media-object" ms-attr="{src:@imgPath+@good[2].thumb}"/>
										<div class="mui-media-body">
											{{@good[2].title}}
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-6">
									<a ms-attr="{id:@good[3].id}">
										<img class="mui-media-object" ms-attr="{src:@imgPath+@good[3].thumb}" />
										<div class="mui-media-body">
											{{@good[3].title}}
										</div>
									</a>
								</li>
							</ul>
						</div>
						<div class="mui-slider-item">
							<ul class="mui-table-view mui-grid-view">
								<li class="mui-table-view-cell mui-media mui-col-xs-6" ms-for="el in @good | limitBy(2) as items">
									<a ms-attr="{id:el.id}">
										<img class="mui-media-object" ms-attr="{src:@imgPath+el.thumb}" />
										<div class="mui-media-body">
											{{el.title}}
										</div>
									</a>
								</li>
							</ul>
						</div>
						<div class="mui-slider-item">
							<ul class="mui-table-view mui-grid-view">
								<li class="mui-table-view-cell mui-media mui-col-xs-6" ms-for="el in @good | filterBy(@searchFun)">
									<a ms-attr="{id:el.id}">
										<img class="mui-media-object" ms-attr="{src:@imgPath+el.thumb}" />
										<div class="mui-media-body">
											{{el.title}}
										</div>
									</a>
								</li>
							</ul>
						</div>
						<div class="mui-slider-item mui-slider-duplicate">
							<ul class="mui-table-view mui-grid-view">
								<li class="mui-table-view-cell mui-media mui-col-xs-6">
									<a ms-attr="{id:@good[0].id}">
										<img class="mui-media-object" ms-attr="{src:@imgPath+@good[0].thumb}" />
										<div class="mui-media-body">
											{{@good[0].title}}
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-6">
									<a ms-attr="{id:@good[1].id}">
										<img class="mui-media-object" ms-attr="{src:@imgPath+@good[1].thumb}" />
										<div class="mui-media-body">
											{{@good[1].title}}
										</div>
									</a>
								</li>
							</ul>
						</div>
						<!--END-->
					</div>
					<div class="mui-slider-indicator" style="position: static;background-color: white;">
						<span class="mui-action mui-action-previous mui-icon FontAwesome icon-angle-left" style="border: none;"></span>
						<div class="mui-number">
							<span>1</span>/2
						</div>
						<span class="mui-action mui-action-next mui-icon FontAwesome icon-angle-right" style="border: none;"></span>
					</div>
				</div>
				<ul class="mui-table-view mui-grid-view" id="recommend-card">
					<!---->
					<li class="mui-table-view-cell mui-media mui-col-xs-6" ms-for="el in @good | filterBy(@searchFun1)">
						<div class="mui-card">
							<div class="mui-card-content">
								<a ms-attr="{id:el.id}">
									<img src="images/hot_05.png" style="position: absolute;left:16%;top: 5%; width: 20%;height: auto;opacity: 0.7;" />
									<img ms-attr="{src:@imgPath+el.thumb}"/>
								</a>
							</div>
							<div class="mui-card-footer">
								<p>
									<span style="float:left;text-align:left;">
										¥ {{el.marketprice}}
									</span>
									<span style="float:right;text-align:right;text-decoration:line-through;">
										¥ {{el.productprice}}
									</span>
								</p>
								<p>
									<a ms-attr="{id:el.id}" class="gtitle">
										{{el.title}}
									</a>
								</p>
							</div>
						</div>
					</li>
					<!--END-->
				</ul>
			</div>
		</div>
		</div>
	</body>
	<script src="js/avalon.js"></script>
	<script src="js/mui.min.js"></script>
	<!--路由功能-->
	<script src="js/common.js"></script>
	<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		//初始化scroll控件
		mui('.mui-scroll-wrapper').scroll({
			deceleration:0.0005
		})
		//轮播banner
		/*var main_gallery = mui('.main_lunbo');
		main_gallery.slider({
			interval:5000
		});*/
		
		//加载公共模板
		//推荐商品 轮播推荐部分
		/*var recommend_gallery = mui('.recommend-lunbo');
		recommend_gallery.slider({
			interval:5000
		});*/
		
		//加载分类公共模板
		var cateBtn = document.getElementsByClassName('cate');
		
		var clink;
		mui('#navcate').on('tap','.cate',function(){
			clink = this.firstChild.id; alert(clink);
			var cgPage = null;
			plus.nativeUI.showWaiting('加载中...');
			plus.webview.create('Goods/common_cate.html','common_cate.html',{background:'red'},{cid:clink});
			
			
			if(!cgPage){
				cgPage = plus.webview.getWebviewById('common_cate.html');
			}
			mui.fire(cgPage,'show',{
					cid:clink
			});
		});
		
		//点击商品跳转 事件
		mui('.tuijian').on('tap','')
		
		
		mui.plusReady(function(){
			/**
			 * 检测本地是否存有数据
			 * @param {main_data}  main页数据 本地缓存 
			 * 
			 */
			var main_data = plus.storage.getItem('main_data');
			/**
			 * @desc 如果有 判断是否过期
			 */
			var type = 'inner';
			if(main_data){
			//	如果有数据 判断是否过期
				
				
				load()
			}else{
				
				getData(type);
			}
			
		});
		
		/**
		 * 注册 avalon VM
		 * @param {Array,adv} 轮播广告数据
		 * @param {Array,good} 商品数据
		 * @param {Array,cate} 分类数据
		 * @param {Function,searchFun} 定义轮播商品过滤函数
		 * @param {Function,searchFun1} 定义商品列表过滤函数
		 */
		var vm = avalon.define({
			$id : 'mainPage',
			adv : [],
			good : [],
			cate : [],
			imgPath : '',
			advlength : '',
			searchFun : function(el,i){
				return i>1 && i<4;
			},
			searchFun1 : function(el,i){
				return i>3 ;
			}
		});
		
		vm.imgPath = ipconfig().jpg;
		
		
		//ajax 请求
		var getData = function(type){
			var type = type;
			var ip = ipconfig().ip
			mui.ajax(ip+'MainPage.getMainPageData',{
				dataType:'json',
				timeout:10000,
				type:'get',
				headers:{'Content-Type':'application/json'},
				success:function(data){/*console.log(data.data.data);*/
					//json转码
//					var data = eval(data);
					//load 插入dom
					//console.log(data.data.data.adv); 
					vm.adv = data.data.data.adv;
					vm.good = data.data.data.good;
					vm.cate = data.data.data.cate;
					
					
					vm.advlength = vm.adv.length - 1;
					
					
					//load(data.data.data,type);
					//初始化 首页广告轮播组件
					var main_gallery = mui('.main_lunbo');
						main_gallery.slider({
							interval:10000
						});
				 	var recommend_gallery = mui('.recommend-lunbo');
						recommend_gallery.slider({
							interval:10000
						});
				},error:function(xhr,type,errorThrow){
					console.log(type);
				}
			});
		}
		
		 
		
		
	</script>
</html>